<template>
	<view>
		<view class="p-3 flex align-center" hover-class="bg-light" @click="onLogin">
			<image class="profile-avatar rounded-circle" src="/static/demo/6.jpg" mode=""></image>
			<view class="flex flex-column align-center text-muted ml-3">
				<view class="flex align-center">
					<text class="text-dark font-md">sunshine Boy</text>
					<text class="ml-2">男 北京</text>
				</view>
				<view class="text-muted">一位非常帅气英俊的北京boy</view>
			</view>
		</view>
		<divider></divider>
		<view>
			<user-feature-item leftIcon="iconshipin" title="我的作品" :isShowArrow="false" @click="openPage('user-works')">
				<text slot="right-text" class="text-muted">26个</text>
			</user-feature-item>
			<user-feature-item leftIcon="iconshoucang1" title="收藏" @click="openPage('user-favorites')"></user-feature-item>
			<user-feature-item leftIcon="iconguanzhu" title="关注">
				<text slot="right-text" class="text-muted">365</text>
			</user-feature-item>
			<user-feature-item leftIcon="iconlishi" title="历史"></user-feature-item>
		</view>
		<divider></divider>
		<view class="p-3">
			<main-button @click="openPopup">立即投稿</main-button>
		</view>
		<popup ref="popupRef">
			<view class="flex align-center justify-center py-3">
				<view class="flex-1 flex flex-column align-center justify-center" hover-class="bg-light" @click="openCreatePost">
					<view class="choose-btn rounded-circle bg-primary flex align-center justify-center text-white">
						<text class="iconfont icondingdanwenjian"></text>
					</view>
					<text class="">单集</text>
				</view>
				<view class="flex-1 flex flex-column align-center justify-center" hover-class="bg-light">
					<view class="choose-btn rounded-circle bg-main flex align-center justify-center text-white">
						<text class="iconfont icon918caidan_wenjian"></text>
					</view>
					<text class="">连载</text>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			openPopup() {
				this.$refs.popupRef.open()
			},
			openCreatePost() {
				uni.navigateTo({
					url:'/pages/create-post/create-post'
				}).then(()=> {
					this.$refs.popupRef.close()
				})
			},
			openPage(path) {
				uni.navigateTo({
					url:`/pages/${path}/${path}`
				})
			},
			onLogin() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.profile-avatar {
		width: 120rpx;
		height: 120rpx;
	}

	.choose-btn {
		width: 80rpx;
		height: 80rpx;
	}
</style>